<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="5" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
.gray-bg {
	background: #f5f5f5
}

.banner {
	width: 100%
}

.banner img {
	width: 100%
}

.wrap {
	margin-top: 25px;
	overflow: hidden;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.wrap  .tab-list {
	margin-bottom: 10px;
}

.wrap  .tab-list a {
	margin-bottom: 15px;
	margin-right: 10px;
	height: 34px;
	background: #dab75b;
	padding: 0 10px;
	margin-right: 12px;
	color: #ffffff;
	display: inline-block;
	font-size: 16px;
	line-height: 34px;
	border-radius: 4px;
	    cursor: pointer;
}
.wrap  .tab-list a:hover{background: #c18a3c}
.wrap  .tab-list a.active {
	background: #c18a3c
}

.con {
	overflow: hidden;
	padding-top: 50px;
}

.info {
	width: 400px;
	float: left;
	color: #c59350
}

.info .tit {
	font-size: 20px;
	letter-spacing: 2px;
	font-weight: bold;
}

.info .en-tit {
	font-size: 18px;
	letter-spacing: 2px;
	margin: 15px 0 0;
}

.info .line {
	height: 1px;
	width: 116px;
	background: #c59350;
	display: block;
	margin: 25px 0
}

.info li {
	height: 65px;
	font-size: 15px;
}

.info li img {
	margin-right: 18px;
}

.map {
	width: 740px;
	border: 2px solid #c59350
}

.map img {
	width: 100%;
}

.contact {
	margin-top: 50px;
	text-align: center
}

.contact h3 {
	text-align: left;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
}

.contact h3:nth-of-type(2) {
	margin: 15px 0 5px;
	font-weight: normal
}

.contact p {
	text-align: left;
	margin: 50px 0;
	font-size: 15px;
}

.contact p span {
	color: #c18a3c
}

.contact li {
	width: 33%;
	float: left;
	padding: 10px 0;
	text-align: left;
}

.contact li span {
	color: #000000;
	font-weight: bold;
}

.contact li input {
	border: 0px;
	border-bottom: 1px solid #afafaf;
	width: 280px;
	outline: 0;
}

input:focus {
	outline: 0px;
}

.contact li:last-of-type {
	width: 100%;
}

.contact li:last-of-type input {
	width: 94%;
	display: block;
}

.send {
	width: 188px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	color: #ffffff;
	background: #c18a3c;
	margin: 70px auto 100px;
	display: inline-block;
	border-radius: 20px;
}

.send:hover {
	color: #ffffff;
}
.menu-wrap{    position: relative;}
.menu{position: absolute;z-index: 23;padding-top:12px;display:none;}
.business-wrap{position: absolute;left:175px;top:11px;height:432px;}
</style>
</head>
<body class="">
<div id="app">
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="container menu-wrap wrap-box">
		<ul class="menu">
			<cms:ad var="items" code="ywfl"></cms:ad>
			<c:forEach var="item" items="${items }">
				<li  @mouseover="selectAd('${item.adUrl }')"><a href="${item.adUrl }" target="blank"><img
						src="${item.adImg }" alt="">${item.adTitle }</a></li>
			</c:forEach>
		</ul>
		<div class="business-wrap">
           <div class="business-list" v-for="item in ads">
               <div class="img-box"><img :src="item.adImg" alt=""></div>
               <div>
                   <h4><a href="">{{item.adTitle}}</a></h4>
                   <div class="business-list-link">
                      {{item.adInfo1}}
                   </div>
                   <div class="btns"><a :href="item.adUrl">在线咨询</a><a target="blank" :href="item.adUrl">查看详情</a></div>
               </div>
           </div>
       </div>
	</div>
	<div class="banner">
		<cms:ad var="banner" code="lxwmbanner" multi="false"></cms:ad>
		<img src="${banner.adImg}" alt="">
	</div>

	<div class="gray-bg" >
		<div class="container">
			<div class="wrap">
				<div class="tab-list">
					<cms:ad var="items" code="gsdz"></cms:ad>
					<c:forEach var="item" items="${items }" varStatus="count">
						<a onclick="showContent('content${count.index }')"
							<c:if test="${count.index eq 0 }">  
						class="active"</c:if>>${item.adTitle }</a>
					</c:forEach>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<c:forEach var="item" items="${items }" varStatus="count">

			<div class="con contentsss" id="content${count.index }"
				<c:if test="${count.index eq 0 }"> 
						style="display:block"</c:if>
				<c:if test="${count.index ne 0 }"> 
						style="display:none"</c:if>>
				<div class="info">
					<h3 class="tit">公司地址</h3>
					<h3 class="en-tit">Our Offices</h3>
					<span class="line"></span>
					<ul>
						<li><img src="${path}/resource/images/address.png" alt=""><span>${item.adInfo1}</span></li>
						<li><img src="${path}/resource/images/tell.png" alt="">
							<span>分公司座机 ： ${item.adInfo2}</span> <span
							style="display: block; margin-left: 43px;">业务热线：
								${item.adInfo3}</span></li>
						<li><img src="${path}/resource/images/qq.png" alt=""><span>业务QQ
								：${item.adInfo4}</span></li>
					</ul>
				</div>
				<div class="map fr">
					<img src="${item.adImg}" alt="">
				</div>
			</div>
		</c:forEach>

	</div>
	<div class="container contact">
		<h3>咨询内容</h3>
		<h3>Drop A Line</h3>
		<p>
		<cms:ad var="email" code="email" multi="false"></cms:ad>
			通过下方模块把信息发送给我们，或者给我发送邮件，<span>E-mail :${email.adTitle } </span>
		</p>
		<form class="form-horizontal" id="dataform"
			onsubmit="javascripr:return false;">
		<ul>
			<li><span>称呼<sup>*</sup>：
			</span><input name="msgUserName" type="text"></li>
			<li><span>手机号<sup>*</sup>：
			</span><input name="msgTel" type="text"></li>
			<li><span>主题<sup>*</sup>：
			</span><input name="msgType" type="text"></li>
			<li><span>备注<sup>*</sup>：
			</span><input name="msgContent" type="text" class="txt"></li>
		</ul>
		<a href="javascript:void(0)" onclick="myForm.submit()" class="send">发送给我们</a>
		</form>
	</div>
	</div>

	<jsp:include page="_foot.jsp"></jsp:include>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/visitor/index.js"></script>
<script type="text/javascript" src="${path }/resource/js/systools/MForm.js" ></script>
<script type="text/javascript" src="${path }/resource/plugin/Validform_v5.3.2/Validform_v5.3.2.js" ></script>
<script type="text/javascript" src="${path }/resource/js/systools/MValidform.js" ></script>
<script type="text/javascript" src="${path }/resource/plugin/layer/layer.js" ></script>
<script>
function getRootPath() {
	var curWwwPath = window.document.location.href;
	var pathName = window.document.location.pathname;
	var url=curWwwPath.substring(0, curWwwPath.indexOf(pathName));
	if(url.indexOf('localhost')>0){
		return url+ pathName.substring(0, pathName.substr(1).indexOf('/') + 1); 
	}
	if(url.split(".").length==4){
		return  url+ pathName.substring(0, pathName.substr(1).indexOf('/') + 1); 
	}
	return url; 
}
	function showContent(id) {
		$(".contentsss").hide();
		$("#" + id).show();
	}
	$(".tab-list a").click(function() {
		$(this).addClass("active").siblings().removeClass("active")
	})
	
	var myForm=MForm.initForm({
		invokeUrl:"${path}/addMsg",
		afterSubmit:function(){
			MForm.reset()
		},
	});
	
	var app = new Vue({
		el : '#app',
		data : {
			ads:[],
		},
		
		methods : {
			
			selectAd:function(code){
				$.AjaxProxy({
					c : false,
					p : {
						"code" : code
					}
				}).invoke("${path}/findAd", function(loj) {
					app.ads = loj.getValue("rows");
				});
			}
				
			}
	});
	
	
</script>

</body>
</html>
